<template>
  <div>
    <el-table :data="this.stuObj.records" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"/>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="birthday" label="生日"/>
      <el-table-column prop="phone" label="电话"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="del(scope.row)">删除</el-button>

          <el-button
              size="small"
              type="danger"
              @click="findById(scope.row)">修改
          </el-button>

        </template>
      </el-table-column>

    </el-table>
    <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        background
        layout="prev, pager, next, jumper"
        :total="this.stuObj.total"
        @current-change="findByItem(currentPage)"
    />

    <input type="button" value="添加" @click="addLook=true">

    <el-form
        ref="studentForm"
        :model="paramsObj"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon>

      <el-form-item label="姓名" prop="name">
        <el-input v-model="paramsObj.name"/>
      </el-form-item>
      <el-form-item label="起始生日" prop="startDate">
        <el-input v-model="paramsObj.startDate"/>
      </el-form-item>
      <el-form-item label="结束生日" prop="endDate">
        <el-input v-model="paramsObj.endDate"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="findByItem(1)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
        v-model="updateLook"
        title="更新电话"
        width="30%">
      <span> <div>
        姓名：{{ updateObj.name }}<br>
        生日：{{ updateObj.birthday }}<br>
        电话：<input type="text" v-model="updateObj.phone"><br>
      </div>
        <el-button @click="update()">确定</el-button></span>

    </el-dialog>

    <el-dialog
        v-model="addLook"
        title="添加"
        width="30%">

      <span>
        <div>
        姓名：<input type="text" v-model="addObj.name"><br>
        生日：<input type="text" v-model="addObj.birthday"><br>
        电话：<input type="text" v-model="addObj.phone"><br>
      </div>
        <el-button @click="add()">确定</el-button>
      </span>

    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      stuObj: {},
      paramsObj: {},
      addLook: false,
      addObj: {},
      updateLook: false,
      updateObj: {},
      currentPage: 1,
      pageSize: 3,
    }
  },
  created() {
    this.findByItem(1);
  },
  methods: {
    findByItem(pageNO) {
      this.paramsObj.pageNO = pageNO;
      axios.get("/project/student/findByItem", {params: this.paramsObj})
          .then(resp => {
            this.stuObj = resp.data;
          })
    },

    add() {
      axios.get("/project/student/add", {params: this.addObj}).then(resp => {
        if (resp.data == "ok") {
          this.addLook = false;
          this.findByItem(1);
          this.addObj = {};
        }
      })
    },

    del(obj) {
      axios.get("/project/student/del", {
        params: {
          id: obj.id
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1);
          this.currentPage = 1;
        }
      })
    },

    findById(obj) {
      axios.get("/project/student/findById", {params: {id: obj.id}}).then(resp => {
        this.updateLook = true;
        this.updateObj = resp.data;
        this.findByItem(1);
      })
    },

    update() {
      axios.get("/project/student/update", {
        params: this.updateObj
      }).then(resp => {
        if (resp.data == "ok") {
          this.updateLook = false;
          this.findByItem(1);
        }
      })
    },

  }
}

</script>

<style scoped>

</style>